<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>TODOList</title>
    <style type="text/css">
      body {
        margin: 0;
        background-color: #f5f5f5;
      }
      h1 {
        margin: 30px 0 0 0;
        color: #ff5550;
        text-align: center;
        font-size: 60px;
      }
      #back {
        width: 300px;
        margin: 0 auto;
        border: 1px solid #333;
        box-shadow: 0px 0px 3px #999;
        background-color: #fff;
      }
      #back input {
        width: 100%;
        box-sizing: border-box;
        line-height: 30px;
        border: none;
        border-bottom: 1px solid #000;
        padding: 5px 15px;
        font-size: 18px;
      }
      #list_back .single {
        position: relative;
        border-bottom: 1px solid #000;
      }
      #list_back .single p {
        width: 100%;
        height: 30px;
        margin: 0;
        line-height: 30px;
        padding: 5px 15px;
      }
      #list_back .single span {
        position: absolute;
        right: 0;
        top: 0;
        width: 30px;
        text-align: center;
        line-height: 40px;
        font-size: 18px;
        color: #000;
        cursor: pointer;
      }
    </style>
  </head>
  <body>
    <h1>todos</h1>
    <div id="back">
      <input id="addInput" type="text" name="" />
      <div id="list_back"></div>
    </div>
    <script type="text/javascript">
      var oAddInput = document.getElementById("addInput");
      var oList_back = document.getElementById("list_back");
      var all = document.getElementsByClassName("single");
      oAddInput.onkeyup = function () {
        // alert(event.keyCode);//13
        // alert(event.code);//Enter
        if (event.keyCode == "13") {
          // alert('add');
          var oDiv = document.createElement("div");
          var oSpan = document.createElement("span");
          var oP = document.createElement("p");
          oDiv.appendChild(oP);
          oDiv.appendChild(oSpan);
          oP.innerHTML = oAddInput.value;
          oSpan.innerHTML = "&times;";
          oDiv.className = "single";
          oList_back.appendChild(oDiv);
          oAddInput.value = ""; //清空输入框
          oSpan.onclick = function () {
            oList_back.removeChild(this.parentNode); //绑定删除方法
          };
        }
      };
      //模糊查询
      function select() {
        oAddInput.addEventListener("keyup", function (e) {
          //监听键盘抬起事件（所有键盘按钮）
          // console.log(e.target.value);
          var str = e.target.value;
          var reg = new RegExp("(" + str + ")", "g"); //匹配到的文字变红色，准备工作
          for (var i = 0; i < all.length; i++) {
            var one = all[i].getElementsByTagName("p")[0];
            var newStr = one.innerText.replace(
              reg,
              "<font color=red>$1</font>"
            ); //换-->红色，用innerText防止用innerHTML将标签也读取出来出错。
            if (one.innerText.indexOf(str) == -1) {
              //也选用innerHTML
              all[i].style.display = "none"; //匹配不到的掩藏
            } else {
              one.innerHTML = newStr; //匹配到的变红
            }
          }
          if (str == "") {
            for (var i = 0; i < all.length; i++) {
              all[i].style.display = "block"; //输入框空时全部显示
            }
          }
        });
      }
      select(); //函数解析完就运行
    </script>
  </body>
</html>
